<template>
    <!-- 精选产品 -->
    <div class="madp-product" v-show="list.length > 0">
        <div class="header">
            <span>精选产品</span>
            <span class="cursor-pointer" @click="getMore">更多</span>
        </div>
        <div :class="['container', showScrollX ? '' : 'hideScroll']">
            <div class="list">
                <div class="item cursor-pointer" v-for="(item, idx) in list" :key="idx" @click="intoDetail(item, idx)">
                    <img class="item-bg" src="@/assets/img/financialShop/beijingtuan2.png" alt="" />
                    <div class="main">
                        <span>{{ item.type == 11 ? '理财' : '基金' }}</span>
                        <span class="text-one-ellipsis">{{ item.name }}</span>
                        <span :class="['text-one-ellipsis', item.yearRate - 0 >= 0 ? 'red' : 'green']" v-if="item.type == 12">{{ format_money_decimal_jingdu(item.yearRate, true) }}%</span>
                        <span :class="['text-one-ellipsis', getShowInfo(item).flag == 1 ? 'red' : 'green']" v-if="item.type == 11">{{ getShowInfo(item).rate }}</span>
                        <span class="text-one-ellipsis" v-if="item.type == 12">近一年涨跌幅</span>
                        <span class="text-one-ellipsis" v-if="item.type == 11">{{ getShowInfo(item).text }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { isPcWeixin } from '@/utils/util';
    import financialApi from '@/api/financial-shop.js';
    import { format_money_decimal, format_money_decimal_jingdu, parseDeletePer } from '@/utils/financial-utils';
    export default {
        components: {},
        data() {
            return {
                showScrollX: false,
                list: []
            };
        },
        props: {
            wxUserId: {
                type: String,
                default: ''
            },
            sort: {
                type: Number,
                default: 0
            }
        },
        watch: {
            wxUserId: function () {
                if (this.wxUserId) {
                    this.getProductList();
                }
            }
        },
        filters: {},
        created() {},
        mounted() {
            if (this.wxUserId) {
                this.getProductList();
            }
            if (isPcWeixin()) {
                this.showScrollX = true;
            }
        },
        methods: {
            parseDeletePer,
            format_money_decimal,
            format_money_decimal_jingdu,
            getShowInfo(info) {
                let data = {
                    text: '',
                    rate: 0,
                    flag: 1 // 1-正 0-负
                };
                if (info.reserve1 != '1309') {
                    if (info.prdStatus == '1') {
                        data.text = '新品首发';
                        data.rate = '--';
                        data.flag = 1;
                    } else {
                        data.text = this.benchType(info.showBenchType);
                        data.rate = info.benchValue ? this.format_money_decimal(info.benchValue) : '--';
                        data.flag = info.benchValue > 0 ? 1 : 0;
                    }
                } else if (info.profolioType == '1' && info.prdStatus != '1') {
                    data.text = '七日年化收益率';
                    data.rate = this.parseDeletePer(this.format_money_decimal(info.yield)) + '%';
                    data.flag = info.yield > 0 ? 1 : 0;
                } else if (info.profolioType == '0' || (info.profolioType == '1' && info.prdStatus == '1')) {
                    data.text = '业绩比较基准';
                    if (info.reserve1 == '1309' && info.planVolRate && info.planVolRate.charAt(info.planVolRate.length - 1) == '%') {
                        data.rate = this.parseDeletePer(this.format_money_decimal(info.planVolRate)) + '%';
                    } else {
                        data.rate = this.parseDeletePer(this.format_money_decimal(info.planVolRate));
                    }
                    data.flag = info.planVolRate > 0 ? 1 : 0;
                } else if (info.prdTemplateCode == '1301') {
                    data.text = '业绩比较基准/净值';
                    data.rate = info.planVolRate / info.nav;
                    data.flag = info.planVolRate / info.nav > 0 ? 1 : 0;
                } else if (info.prdTemplateCode == '1309') {
                    data.text = '每万份收益';
                    data.rate = info.incomeUnit;
                    data.flag = info.incomeUnit > 0 ? 1 : 0;
                }
                return data;
            },
            benchType(type) {
                switch (type) {
                    case '0':
                        return '近1月年化';
                    case '1':
                        return '近3月年化';
                    case '3':
                        return '近6月年化';
                    case '4':
                        return '近1年年化';
                    case '5':
                        return '成立以来年化';
                }
            },
            getMore() {
                this.$sensorsSend('MktClick', {
                    recommend_id: this.$store.state.vuex_wxUserId,
                    $title: '首页',
                    mkt_type: '',
                    mkt_name: '产品',
                    mkt_location: this.sort,
                    mkt_content_name: '金融小店',
                    mkt_content_type: '产品'
                });
                this.$router.push({
                    path: '/financialShop/product-list',
                    query: {
                        wxUserId: this.wxUserId
                    }
                });
            },
            intoDetail(info, idx) {
                if (info.type == 12) {
                    this.$sensorsSend('MktClick', {
                        recommend_id: this.$route.query.wxUserId || this.$store.state.vuex_wxUserId || this.wxUserId,
                        $title: '基金产品详情',
                        mkt_type: '',
                        mkt_name: '基金产品详情',
                        mkt_location: idx,
                        mkt_content_name: info.name,
                        mkt_content_type: '基金'
                    });
                    // 基金
                    this.$router.push({
                        path: '/financialShop/financial-fund-detail',
                        query: {
                            id: info.id,
                            radar_type_code: '02',
                            radar_code: info.id,
                            radar_name: info.name
                        }
                    });
                } else {
                    this.$sensorsSend('MktClick', {
                        recommend_id: this.$route.query.wxUserId || this.$store.state.vuex_wxUserId || this.wxUserId,
                        $title: '理财产品详情',
                        mkt_type: '',
                        mkt_name: '理财产品详情',
                        mkt_location: idx,
                        mkt_content_name: info.name,
                        mkt_content_type: '理财'
                    });
                    // 理财
                    this.$router.push({
                        path: '/financialShop/financial-detail',
                        query: {
                            id: info.id,
                            radar_type_code: '01',
                            radar_code: info.id,
                            radar_name: info.name
                        }
                    });
                }
            },
            getProductList() {
                financialApi
                    .getProductList({
                        current: 1,
                        size: 10,
                        status: 1,
                        wxUserId: this.wxUserId
                    })
                    .then((res) => {
                        this.list = res.data.data.records;
                    });
            }
        }
    };
</script>
<style scoped lang="scss">
    .madp-product {
        width: 100%;
        margin-bottom: 16px;
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 8px 0;
            :nth-child(1) {
                font-size: 18px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #2c2c2c;
            }
            :nth-child(2) {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(32, 32, 32, 0.8);
            }
        }
        .container {
            width: 100%;
            overflow: hidden;
            overflow-x: scroll;
            .list {
                white-space: nowrap;
                .item {
                    position: relative;
                    display: inline-block;
                    margin-right: 8px;
                    width: 124px;
                    height: 129px;
                    background: #ffffff;
                    box-shadow: 0px 3px 6px 0px rgba(181, 181, 181, 0.16);
                    border-radius: 8px;
                    .item-bg {
                        position: absolute;
                        right: 0;
                        bottom: 0;
                        width: 102px;
                    }
                    .main {
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: flex;
                        flex-direction: column;
                        padding: 34px 9px 16px 17px;
                        span:not(:first-child) {
                            width: 100px;
                            text-shadow: 0px 3px 6px rgba(181, 181, 181, 0.16);
                            font-family: PingFangSC-Medium, PingFang SC;
                        }
                        :nth-child(1) {
                            position: absolute;
                            top: 0;
                            left: 0;
                            font-size: 12px;
                            font-weight: 500;
                            color: #ffffff;
                            padding: 1px 10px;
                            background: #ed5555 linear-gradient(to right, #fd4346, #ff7f74);
                            border-radius: 8px 0px 8px 0px;
                        }
                        :nth-child(2) {
                            font-size: 14px;
                            font-weight: 500;
                            color: #202020;
                        }
                        :nth-child(3) {
                            margin-top: 8px;
                            margin-bottom: 5px;
                            font-size: 25px;
                            font-family: Roboto-Medium, Roboto;
                            font-weight: 500;
                            color: #ed5555;
                        }
                        :nth-child(4) {
                            font-size: 12px;
                            font-weight: 400;
                            color: rgba(32, 32, 32, 0.4);
                        }
                    }
                }
            }
        }
        .hideScroll {
            scrollbar-width: none; /* firefox */
            -ms-overflow-style: none; /* IE 10+ */
        }
        .hideScroll::-webkit-scrollbar {
            display: none; /* Chrome Safari */
        }

        .red {
            color: #ed5555 !important;
        }
        .green {
            color: #5ba764 !important;
        }
    }
</style>
